<template>
	<view class="overdue">
		<block v-if="!boxHide">
			<view class="overdue_top">
				<picker mode="selector" :range="laber" @change="getType" class="overdue_sel">
					<view class="overdue_sel_box">
						<view>{{laber[laberId]}}</view>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</picker>
			</view>
			
			<view class="overdue_list">
				<block v-for="(item,index) in list">
					<!-- <view class="visit_item_time">{{items.time}}</view>
					<block v-for="(item,index) in items.data"> -->
						<view class="visit_item_content_box">
							<view class="visit_item_content_title">
								<view>{{item.userName}}</view><view>{{visitLaber[item.category]}}</view><image src="/static/images/prompt.png"></image>
							</view>
							<view class="visit_item_content_text">
								<view class="">{{item.title}}</view>
							</view>
							<view class="visit_item_content_time">
								<view>{{item.addTime}}</view>
								<view class="visit_item_content_time_icon">
									<image src="/static/images/visit_icon1.png" @tap="visitDeal(1)"></image>
									<image src="/static/images/visit_icon2.png" @tap="visitDeal(2)"></image>
									<image src="/static/images/visit_icon3.png" @tap="visitDeal(3)"></image>
									<image src="/static/images/visit_icon4.png" @tap="visitDeal(4)"></image>
								</view>
							</view>
						</view>
					<!-- </block> -->
				</block>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				load:{},
				loading:true,
				laber:["自己","别人"],
				laberId:0,
				list:[],
				boxHide:true,
				visitLaber:["","初次咨询","上门拜访"]
			}
		},
		onShow() {
			this.$refs.load.initLoading({loadType:1}).then(res =>{
				this.boxHide = false;
				this.getData(0);
			})
		},
		onReachBottom() {
			this.$refs.load.initLoading({loadType:3}).then(res =>{
				this.getData(1);
			})
		},
		methods:{
			visitDeal(index){//拜访操作
				if(index == 3){
					uni.navigateTo({
						url:"/pages/client/info/visitSend/visitSend"
					})
				}else if(index == 4){
					
				}else{
					uni.navigateTo({
						url:"/pages/client/info/visitAdd/visitAdd?type=" + index
					})
				}
			},
			getType(e){
				this.$refs.load.initLoading({loadType:1}).then(res =>{
					this.laberId = e.detail.value;
					this.getData(0);
				})
			},
			getData(type){
				if(type == 0){
					this.list = [];this.page = 1;this.loading = true;
				}
				if(!this.loading) return;
				this.$api.getClientOverTimeList({page:this.page}).then(res => {
					this.$refs.load.getLoadingData({oldData:this.list,newData:res.visitList}).then(res => {
						this.page++;
						this.list = res.list;
						this.loading = res.loading;
					})
				})
			}
		}
	}
</script>

<style>
	.overdue{padding: 30upx 0;}
	.overdue_top{position: fixed;width: 100%;height: 40upx;top: 0;left: 0;padding-top: 20upx;}
	.overdue_sel,.overdue_sel_box{width: 100%;height: 40upx;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 28upx;color: #333333;background: #F7F7FA;}
	.overdue_sel_box image{width: 22upx;height: 10upx;margin-left: 10upx;}
	
	.overdue_list{margin-top: 60upx;width: 100%;}
	.visit_item_time{width: 100%;text-align: center;color: #9BA7B7;font-size: 28upx;margin: 30upx 0 0 0;}
	.visit_item_content_box{width: 690upx;height: 190upx;background: #FFFFFF;margin: 30upx 0 0 30upx;background: #FFFFFF;}
	.visit_item_content_title{display: flex;flex-direction: row;align-items: center;font-size: 28upx;color: #333333;width: 100%;padding:20upx 30upx 0 30upx;margin-top: 20upx;width: 100%;box-sizing: border-box;}
	.visit_item_content_title view:nth-child(2){line-height: 36upx;padding: 0 12upx;font-size: 22upx;color: #049BFF;margin-left: 20upx;background: rgba(4,155,255,0.1);border-radius: 4upx;}
	.visit_item_content_title image{width: 28upx;height: 28upx;margin-left:auto ;}
	.visit_item_content_text{padding: 0 30upx;width: 100%;box-sizing: border-box;height: 80upx;display: flex;flex-direction: row;align-items: center;font-size: 28upx;color: #666666;}
	.visit_item_content_time{width: 100%;padding: 0 30upx;box-sizing: border-box;display: flex;flex-direction: row;align-items: flex-end;font-size: 24upx;color: #9BA7B7;}
	.visit_item_content_time_icon{margin-left: auto;display: flex;flex-direction: row;align-items: center;}
	.visit_item_content_time_icon image{width: 26upx;height: 26upx;margin-left: 26upx;}
</style>
